<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流插件</title>
    <style>
        /* 此样式为 测试样式  S */
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .cascade-flow-wrapper,
        .cascade-flow-wrapper * {
            margin: 0;
            padding: 0;
        }

        .cascade-flow-wrapper {
            width: max-content;
            margin: 0 auto;
        }

        .cascade-flow-wrapper .cascade-flow-item {
            background-color: #2d8cf0;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(1) {
            height: 83px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(2) {
            height: 275px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(3) {
            height: 292px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(4) {
            height: 246px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(5) {
            height: 266px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(6) {
            height: 220px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(7) {
            height: 240px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(8) {
            height: 167px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(9) {
            height: 100px;
        }
        /* 此样式为 测试样式  S */ 
    </style>
</head>

<body>
    <div id="cascade-flow-wrapper" class="cascade-flow-wrapper">
        <div class="cascade-flow-item">1</div>
        <div class="cascade-flow-item">2</div>
        <div class="cascade-flow-item">3</div>
        <div class="cascade-flow-item">4</div>
        <div class="cascade-flow-item">5</div>
        <div class="cascade-flow-item">6</div>
        <div class="cascade-flow-item">7</div>
        <div class="cascade-flow-item">8</div>
        <div class="cascade-flow-item">9</div>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/cascade-flow.js"></script>
    <script>

        // 注释部分代码为编写过程部分 自测代码
        /*;(function randomNumber(min,max) {
            // max - 期望的最大值
            // min - 期望的最小值
            let a = parseInt(Math.random() * (max - min + 1) + min, 10);
            let b = Math.floor(Math.random() * (max - min + 1) + min);
            console.log(a);
            console.log(b)
        })(50,500);*/


        // ;(function getRowFirstNum(col, row){
        //     console.log("------------------")
        //     console.log(col * row - (col -1))
        //     console.log("------------------")
        //     return col * row - (col -1)
        // })(3,2);

        // var rows = (30 % 3 == 0) ? (30 / 3) : Math.ceil((30 / 3));
        // console.log(rows)
        /**
         *
         * CreateBy zhuzhaofneg
         * DateTime 2019年05月26日10:25:17
         * 随机生成 min - max 之间的数
         */
        function randomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        function initialization() {
            // var cascadeFlowItems = document.querySelectorAll('div.cascade-flow-wrapper .cascade-flow-item');
            // cascadeFlowItems.forEach((item, index) => {
            //     let tempHeight = randomNumber(50, 400);
            //     item.style.height = tempHeight + 'px';
            //     item.textContent = index + 1;
            // })
            $('#cascade-flow-wrapper').cascadeFlow({ width: 220,col: 5 });
        }
        window.onload = initialization;
    </script>
</body>

</html>